<template>
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label class="tit">收件人</label>
            <input class="mui-input-clear" v-model="form.name" type="text" placeholder="请输入收件人姓名">
        </div>

        <div class="mui-input-row">
            <label class="tit">联系方式</label>
            <input class="mui-input-clear" v-model="form.tel" type="text" placeholder="请输入手机号码">
        </div>

        <div class="mui-input-row">
            <label class="tit">所在地区</label>
            <input class="mui-input-clear" v-model="form.area" type="text" placeholder="请输入所在地区"
              @click="choose" >
            <div class="divwrap">
                <div class="mask" @click="choose" v-show="show"></div>
                <v-distpicker
                    v-show="show"
                    type="mobile"
                    @province="onChangeProvince"
                    @city="onChangeCity"
                    @area="onChangeArea"
                    :province="newInfo.province"
                    :city="newInfo.city"
                    :area="newInfo.district"
                ></v-distpicker>
            </div>
        </div>

        <div class="mui-input-row">
            <label class="tit">详细地址</label>
            <input class="mui-input-clear" v-model="form.detail" type="text" placeholder="请输入详细地址">
        </div>

        <div class="mui-button-row">
           <button class="mui-btn mui-btn-primary mui-btn-block" @click="save" type="button">确认</button>
           <button class="mui-btn mui-btn-primary mui-btn-block" @click="del" v-show="id" type="button">删除</button>
        </div>

    </form>
</template>

<script>
    import VDispicker from 'v-distpicker'
    export default {
       data(){
           return{
               form:{
                   name:'',
                   tel:'',
                   area:'',
                   detail:''
               },
               show:false,
               newInfo:{
                   province:'',
                   city:'',
                   area:''
               }
           }
       },
        props:['id'],
        created(){
           this.getAddress()
        },
        methods:{
           save(){
            this.$indicator.open({
                text:'提交中'
            });
               this.$http.post('address/save',this.form).then(res =>{
                   this.$indicator.close()
                   if (res.data.code === 0){
                       this.$toast(res.data.msg)
                   }else if (res.data.code === 1){
                       this.$router.go(-1)
                   }else if (res.data.code === 2){
                       this.$router.push({name:'login'})
                   }
               })
           },
            del(){
                this.$indicator.open({
                    text:'提交中'
                });
                this.$http.post('address/del',this.form).then(res =>{
                    this.$indicator.close()
                    if (res.data.code === 0){
                        this.$toast(res.data.msg)
                    }else if (res.data.code === 1){
                        this.$router.go(-1)
                    }else if (res.data.code === 2){
                        this.$router.push({name:'login'})
                    }
                })
            },
            choose(){
               this.show = !this.show
            },
            onChangeProvince(data){
               this.newInfo.province = data.value
            },
            onChangeCity(data){
                this.newInfo.city = data.value
            },
            onChangeArea(data){
                this.newInfo.area = data.value
                this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area
                this.show = false
            },
            getAddress(){
               if (!this.id){
                   return
               }
                this.$indicator.open({
                    text:'加载中'
                });
                var params = {id:this.id};
                this.form.id = this.id
                this.$http.get('address/edit',{params:params}).then(res =>{
                    this.$indicator.close();
                    if (res.data.code === 0){
                        this.$toast(res.data.msg)
                    }else if (res.data.code === 1){
                        this.form = res.data.data
                    }else if (res.data.code === 2){
                        this.$router.push({name:'login'})
                    }
                })
            }
        },
        components:{
           'v-distpicker':VDispicker
        }
    }
</script>

<style lang="scss" scoped>
    .mui-input-group .mui-button-row {
        height: auto;
    }
    .mui-input-clear {
        font-size: 14px;
    }
    .mui-input-group:before {
        list-style: none;
    }
    .mui-button-row {
        margin-top: 20px;
        button {
            margin: 20px 0;
            padding: 10px 0;
        }
    }
    .tit {
        color: #999;
    }
    input::-webkit-input-placeholder {
        color: #999;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
    }
    input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
    }
    input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #999;
    }
    .divwrap > .mask {
        background: #000;
        opacity: 0.3;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .divwrap > .distpicker-address-wrapper {
        color: #999;
        background: #fff;
        border-top: 1px solid #ccc;
        z-index: 1;
        height: 300px;
        overflow-y: auto;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
</style>
